<template>
  <div>
    <div class="main">
      <div class="sutitle">
        <div class="sutitle-name">
          <img src="../../../../static/home/newspaper.png" alt="" width="16px" height="16px" />
          <span>最新报纸</span>
        </div>
        <span class="more">
          <router-link to='newspaperclass'>更多</router-link>
          <img src="../../../../static/home/next.png" alt="" width="6px" height="12px" />
        </span>
      </div>
      <div class="home-main">
        <div class="content">
          <router-link class="sm-content" v-for="(item,index) in newsparperList" :key="index" :to='{name:"newspapercontent", params:{parperdata:JSON.stringify(item)}}'>
            <img :src="paperImgSrc+(item.max_file_name).substring(0,4)+'.jpg'" alt="" onerror="this.src='../../../../static/home/tushu.png'" width="100px" height="140px" />
            <span v-text="item.paper_name">边城</span>
          </router-link>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import api from "./../../../api/api.js";
import { Indicator } from "mint-ui";

export default {
  props: ["navid"],
  data() {
    return {
      items: [
        {
          url: "../../static/lunbo.png"
        },
        {
          url: "../../static/lunbo.png"
        },
        {
          url: "../../static/lunbo.png"
        },
        {
          url: "../../static/lunbo.png"
        }
      ],
      newsparperList: []
    };
  },
  created() {
    this.paperImgSrc = api.paperImgSrc;
    this.datevalue = this.formatDate(new Date().getTime()); //时间
    this.prePushTime = this.datevalue.substring(0, 11); //取年月日
    this.getinfoParper();
  },
  methods: {
    //报纸一级上架
    getinfoParper() {
      Indicator.open({
        text: "拼命加载中...",
        spinnerType: "triple-bounce"
      });
      this.$http({
        method: "post",
        url: api.baseURL + "getCnkiGroupInformation",
        params: {
          inParam: {
            group: ["paper_name"],
            constraint: [],
            time: this.datevalue,
            userId: 506,
            pageSize: 15,
            currentPage: 1,
            resourceType: 4,
            maxvalue: ["date", "file_name"],
            sysCode: "FH_PUBOPE"
          }
        }
      })
        .then(response => {
          if (response.status == 200) {
            console.log(response.data.data);
            this.newsparperList = response.data.data;
          }
          Indicator.close();
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.home-swipe {
  width: 100%;
  height: 142px;
  /*background: skyblue;*/
}

.main .sutitle {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
}

.main .sutitle .sutitle-name {
  /*background-color: coral;*/
  flex-grow: 10;
  -webkit-flex-grow: 10;
  margin-left: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main .sutitle .sutitle-name > span {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 500;
}

.main .sutitle .more {
  /*background: #e60012;*/
  font-size: 13px;
  color: #b6b6b6;
  flex-grow: 1;
  -webkit-flex-grow: 1;
}

.main .sutitle .more > a {
  color: #a1a1a1;
}

.home-main {
  width: 100%;
  height: auto;
  margin-bottom: 1vh;
  /*background: pink;*/
  margin-bottom: 13px;
}

.home-main .content {
  margin: 0 15px;
  display: flex;
  justify-content: space-between;
  /*background: aqua;*/
  flex-wrap: wrap;
}

.home-main .content .sm-content {
  width: 45%;
  /*background: slateblue;*/
  overflow: hidden;
  margin-bottom: 10px;
}

.home-main .content .sm-content img {
  width: 100%;
  height: 60px;
  border-radius: 10px;
  box-shadow: darkgrey 2px 2px 5px;
  /*background: darkorange;*/
}

.home-main .content .sm-content span {
  width: 100%;
  font-family: "微软雅黑";
  font-size: 14px;
}
</style>